<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Customizing the Grid</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC --> <!-- LIBS -->     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>     <!-- ENDLIBS -->
    <script type="text/javascript" src="../../ext-all.js"></script>
    
<!--
    <script type="text/javascript" src="custom-grid.js"></script>
-->
    <script type="text/javascript" >
    // create the property grid application (single instance)
    var CustGrid = function() {
        return {
            init : function() {
                var propsGrid = new Ext.grid.PropertyGrid('props-grid', {
                    nameText: 'Properties Grid',
                    enableHdMenu: false,
                    viewConfig : {
                        forceFit:true,
                        scrollOffset:2 // the grid will never have scrollbars
                    }
                });

                propsGrid.setSource({
                    "(name)": "Properties Grid",
                    "grouping": false,
                    "autoFitColumns": true,
                    "productionQuality": false,
                    "created": new Date(Date.parse('10/15/2006')),
                    "tested": false,
                    "version": .01,
                    "borderWidth": 1
                });
                
                propsGrid.render();
            }
        };
    }();

    Ext.onReady(CustGrid.init, CustGrid, true);

    </script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Property Grid</h1>

<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
<div id="props-grid" style="overflow: hidden; width: 275px;border:1px solid #c3daf9;"></div>

</body>
</html>
